<template>
  <div class="News header">
    <img :src="imgs.bg" alt="" class="bg" />

    <!-- 三个消息按钮 -->
    <div class="message">
      <div class="mes">
        <img :src="imgs.images" alt="" />
        <div>全部消息</div>
      </div>
      <div class="mes">
        <img :src="imgs.kfmessage" alt="" @click="getkfmessage" />
        <div>客服消息</div>
      </div>
      <div class="mes" @click="getsystemmessage">
        <img :src="imgs.systemMessage" alt="" />
        <div>系统消息</div>
      </div>
    </div>
    <!-- 中间图片 -->
    <div class="adimg">
      <img :src="imgs.ad" alt="" />
    </div>
    <!-- 消息栏 -->
    <div class="messagedetail">
      <div class="messageContent" @click="getsystemmessage">
        <img :src="imgs.system" alt="" />
        <div class="mesdesc">
          <div class="titleFather">
            <div class="title">系统消息</div>
            <div class="time">{{ imgs.date }}</div>
          </div>
          <div class="mesdescContent">系统消息具体内容</div>
        </div>
      </div>
      <div class="messageContent" @click="getkfmessage">
        <img :src="imgs.kf" alt="" />
        <div class="mesdesc">
          <div class="titleFather">
            <div class="title">客服消息</div>
            <div class="time">{{ imgs.date }}</div>
          </div>
          <div class="mesdescContent">客服消息具体内容</div>
        </div>
      </div>
      <div class="messageContent" @click="getactivemessage">
        <img :src="imgs.lp" alt="" />
        <div class="mesdesc">
          <div class="titleFather">
            <div class="title">活动消息</div>
            <div class="time">{{ imgs.date }}</div>
          </div>
          <div class="mesdescContent">活动消息具体内容</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
// import { ref } from "vue";
export default {
  name: "News",
  components: {
    // [Button.name]: Button
  },
  setup() {
    const imgs = {
      bg: require("../assets/news/bj.png"),
      images: require("../assets/news/per.png"),
      kfmessage: require("../assets/news/mien.png"),
      systemMessage: require("../assets/news/nesw.png"),
      ad: require("../assets/news/ad.png"),
      system: require("../assets/news/key.png"),
      kf: require("../assets/news/news1.png"),
      lp: require("../assets/news/lp.png"),
      date: null,
    };
    const daytime = () => {
      let day = new Date();
      let date =
        day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
      imgs.date = date;
    };
    daytime();

    return { imgs };
  },
  methods: {
    getsystemmessage() {
      this.$router.push("/news/detail");
    },
    getkfmessage() {
      this.$router.push("/news/kfmessage");
    },
    getactivemessage() {
      this.$router.push("/news/activemessage");
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.News {
  background: #f0f1f3;
  min-height: 95vh;
  .bg {
    width: 100%;
    height: 100px;
  }
  .message {
    width: 94%;
    background-color: #fff;
    position: absolute;
    top: 50px;
    left: 2.5%;
    border-radius: 15px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    .mes {
      width: 60px;
      margin-top: 15px;
      margin-bottom: 15px;
      text-align: center;
      img {
        width: 40px;
        height: 40px;
      }
      div {
        font-size: 14px;
        color: #aaa;
      }
    }
  }
  .adimg {
    width: 94%;
    margin: 0 auto;
    img {
      width: 100%;
      margin-top: 55px;
    }
  }
  .messagedetail {
    width: 95%;
    margin: 0 auto;
    .messageContent {
      display: flex;
      padding: 20px;
      border-radius: 6px;
      background: #fff;
      margin: 15px 0;
      img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }
      .mesdesc {
        width: 100%;
        font-size: 13px;
        color: #aaa;
        .titleFather {
          width: 100%;
          height: 25px;
          height: 25px;
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 16px;
            font-weight: 400;
            color: #000;
          }
        }
        .mesdescContent {
          width: 100%;
          height: 25px;
          line-height: 25px;
        }
      }
    }
  }
}
</style>